<template>
  <view>
    <view class="content" :style="Height">
      <view class="u-tabs-box">
        <u-tabs-swiper id="target" active-color="#fed500" inactive-color="#000000" ref="tabs" :list="lists" :current="current"
          @change="change" bar-width="60" gutter="80"></u-tabs-swiper>
      </view>
      <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" :refresher-enabled="true" :refresher-triggered="triggered"  @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore">
            <view class="page-box">
              <view class="list" v-for="(item,index) in 5" :key="index" @click="CircleNewDetail1">
                <view class="list-item__badge">
                  二刺螈文化交流
                </view>
                <view class="list-item">
                  <view class="list-item__container container--right">
                    <view class="list-item__header">
                      <view class="list-item__icon">
                        <view class="list-item__icon-img">
                          <image src="/static/logo.png" mode="scaleToFill" class="img"></image>
                        </view>
                      </view>
                    </view>
                    <view class="list-item__content">
                      <text class="list-item__content-title">喜多川魅魔</text>
                      <text class="list-item__content-note">2023-08-11 12:12</text>
                    </view>
                    <view class="list-item__extra">
                      <view class="list-item__extra-text">
                        <u-icon name="arrow-right" color="#999" size="28"></u-icon>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="list-item__up">
                  <view class="u-flex list-item__up_d">
                    <text class="iconfont icon-liulan list-item__up-icon"></text>
                    <text>9999</text>
                  </view>
                  <view class="u-flex list-item__up_d">
                    <text class="iconfont icon-pinglun list-item__up-icon"></text>
                    <text>9999</text>
                  </view>
                  <view class="u-flex list-item__up_d">
                    <text class="iconfont icon-jiabahuo list-item__up-icon" style="color: #FF0000;"></text>
                    <text>9999</text>
                  </view>
                </view>
              </view>
              <view style="height: 50rpx;"></view>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" :refresher-enabled="true" :refresher-triggered="triggered"  @refresherpulling="onPulling" @refresherrefresh="onRefresh1" @refresherrestore="onRestore">
            <view class="page-box">
              <view class="list" v-for="(item,index) in 5" :key="index" @click="CircleNewDetail2">
                <view class="list-item__badge">
                  知识科普
                </view>
                <view class="list-item">
                  <view class="list-item__container container--right">
                    <view class="list-item__header">
                      <view class="list-item__icon">
                        <view class="list-item__icon-img">
                          <image src="/static/logo.png" mode="scaleToFill" class="img"></image>
                        </view>
                      </view>
                    </view>
                    <view class="list-item__content">
                      <text class="list-item__content-title">PPT的图片太丑啦！这四个方法完美解决</text>
                      <text class="list-item__content-note">2023-08-11 12:12</text>
                    </view>
                    <view class="list-item__extra">
                      <view class="list-item__extra-text">
                        <u-icon name="arrow-right" color="#999" size="28"></u-icon>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="list-item__up">
                  <view class="u-flex list-item__up_d">
                    <text class="iconfont icon-liulan list-item__up-icon"></text>
                    <text>9999</text>
                  </view>
                  <view class="u-flex list-item__up_d">
                    <text class="iconfont icon-pinglun list-item__up-icon"></text>
                    <text>9999</text>
                  </view>
                  <view class="u-flex list-item__up_d">
                    <text class="iconfont icon-jiabahuo list-item__up-icon" style="color: #FF0000;"></text>
                    <text>9999</text>
                  </view>
                </view>
              </view>
              <view style="height: 50rpx;"></view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        lists: [{
            name: '点赞动态'
          },
          {
            name: '点赞文章'
          },
        ],
        current: 0,
        swiperCurrent: 0,
        tabsHeight: 0,
        dx: 0,
        triggered:true,
        activeColor: '#fed500',
        Height:0,
      }
    },
    mounted() {
      // #ifdef H5 || APP-PLUS
      uni.createSelectorQuery().in(this).select("#target").boundingClientRect(data => {
        this.Height = 'height: calc(100vh - '+(data.height)+'px);'
      }).exec() 
      // #endif
    
    },
    onLoad(options) {
      
    },
    methods: {
      CircleNewDetail1(){
        uni.navigateTo({
        	url: '/pages/Circle/CircleNewDetail/CircleNewDetail1?Name=喜多川魅魔'
        });
      },
      CircleNewDetail2(){
        uni.navigateTo({
        	url: '/pages/Circle/CircleNewDetail/CircleNewDetail2?Name=PPT的图片太丑啦！这四个方法完美解决'
        });
      },
      reachBottom() {
        
      },
      // tab栏切换
      change(index) {
        this.swiperCurrent = index;
      },
      transition({
        detail: {dx}
      }) 
      {
        this.$refs.tabs.setDx(dx);
      },
      animationfinish({
        detail: {
          current
        }
      }) 
      {
        this.$refs.tabs.setFinishCurrent(current);
        this.swiperCurrent = current;
        this.current = current;
      },
      
      /**
       * 自定义下拉刷新控件被下拉
       */
      onPulling(){
        this.triggered = true
      },
      
      /**
       * 自定义下拉刷新被触发
       */
      onRefresh(){
        setTimeout(()=>{
          this.onRestore()
        },1000)
      },
      onRefresh1(){
        setTimeout(()=>{
          this.onRestore()
        },1000)
      },
      
      /**
       * 自定义下拉刷新被中止
       */
      onRestore(){
        this.triggered = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .img {
    width: 100%;
    height: 100%;
  }
  .swiper-box {
    flex: 1;
  }
  .swiper-item {
    height: 100%;
  }
  .content {
    display: flex;
    flex-direction: column;
    /* #ifdef MP-WEIXIN */
    height: calc(100vh - var(--window-top));
    /* #endif */
    width: 100%;
    .list{
      background-color: #fff;
      margin-top: 24rpx;
    }
    .list-item__badge{
      background-color: $supernut-color;
      width: 264rpx;
      padding: 8rpx 32rpx;
      text-align: center;
      border-bottom-right-radius: 28rpx;
    }
    .list-item{
      display: flex;
      font-size: 32rpx;
      position: relative;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      cursor: pointer;
      padding: 32rpx;
      .list-item__container{
        position: relative;
        display: flex;
        flex-direction: row;
        flex: 1;
        overflow: hidden;
        .list-item__header {
          display: flex;
          flex-direction: row;
          align-items: center;
          .list-item__icon{
            margin-right: 18rpx;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            .list-item__icon-img{
              display: block;
              height: 120rpx;
              width: 120rpx;
              margin-right: 20rpx;
              border-radius: 16rpx;
              overflow: hidden;
            }
          }
        }
        .list-item__content{
          display: flex;
          padding-right: 16rpx;
          flex: 1;
          color: #3b4144;
          flex-direction: column;
          justify-content: space-between;
          overflow: hidden;
          .list-item__content-title{
            font-size: 28rpx;
            color: #3b4144;
            overflow: hidden;
          }
          .list-item__content-note{
            margin-top: 6rpx;
            color: #999;
            font-size: 24rpx;
            overflow: hidden;
          }
        }
        .list-item__content--center{
          justify-content: center;
        }
        .list-item__extra{
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          align-items: center;
          .list-item__extra-text{
            color: #999;
            font-size: 24rpx;
          }
        }
      }
    }
    .list-item__up{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-bottom: 24rpx;
      padding-right: 32rpx;
      .list-item__up_d{
        margin:0 8rpx;
        .list-item__up-icon{
          width: 36rpx;
          font-size: 42rpx;
          margin-right: 8rpx;
        }
      }
    }
  }
  
</style>